<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘特效</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="case">
        
        <!-- 第一行-->
        <div class="key">`</div>
        <div class="key" data-key='1'>1</div>
        <div class="key" data-key='2'>2</div>
        <div class="key" data-key='3'>3</div>
        <div class="key" data-key='4'>4</div>
        <div class="key" data-key='5'>5</div>
        <div class="key" data-key='6'>6</div>
        <div class="key" data-key='7'>7</div>
        <div class="key" data-key='8'>8</div>
        <div class="key" data-key='9'>9</div>
        <div class="key" data-key='0'>0</div>
        <div class="key" data-key='-'>-</div>
        <div class="key" data-key='='>=</div>
        <div class="key xxl" data-key='del'>← del</div>
        <div class="key" data-key='insert'>insert</div>
        <div class="key" data-key='home'>home</div>
        <div class="key" data-key='page up'>page up</div>
        <!-- 第二行-->
        <div class="key xxl" data-key='tab'>tab</div>
        <div class="key" data-key='q'>q</div>
        <div class="key" data-key='w'>w</div>
        <div class="key" data-key='e'>e</div>
        <div class="key" data-key='r'>r</div>
        <div class="key" data-key='t'>t</div>
        <div class="key" data-key='y'>y</div>
        <div class="key" data-key='u'>u</div>
        <div class="key" data-key='i'>i</div>
        <div class="key" data-key='o'>o</div>
        <div class="key" data-key='p'>p</div>
        <div class="key" data-key='['>[</div>
        <div class="key" data-key=']'>]</div>
        <div class="key " data-key='\'>\</div>
        <div class="key" data-key='delete'>delete</div>
        <div class="key" data-key='end'>end</div>
        <div class="key" data-key='page down'>page down</div>
        <!-- 第三行-->
        <div class="key xxl" data-key='r'>cap</div>
        <div class="key" data-key='a'>a</div>
        <div class="key" data-key='s'>s</div>
        <div class="key" data-key='d'>d</div>
        <div class="key" data-key='f'>f</div>
        <div class="key" data-key='gr'>g</div>
        <div class="key" data-key='h'>h</div>
        <div class="key" data-key='j'>j</div>
        <div class="key" data-key='k'>k</div>
        <div class="key" data-key='l'>l</div>
        <div class="key" data-key=';'>;</div>
        <div class="key" data-key="'">'</div>
        <div class="key xxl "data-key='enter' >enter</div>
        <div class="key none" ></div>
        <div class="key none"></div>
        <div class="key none"></div>
    
        <!-- 第四行-->
        <div class="key xxxl" data-key='shift'>shift</div>
        <div class="key" data-key='z'>z</div>
        <div class="key" data-key='x'>x</div>
        <div class="key" data-key='c'>c</div>
        <div class="key" data-key='v'>v</div>
        <div class="key" data-key='b'>b</div>
        <div class="key" data-key='n'>n</div>
        <div class="key" data-key='m'>m</div>
        <div class="key" data-key=','>,</div>
        <div class="key" data-key='.'>.</div>
        <div class="key" data-key='/'>/</div>
        <div class="key xxxl" data-key='shift'>shift</div>
        <div class="key none" ></div>
        <div class="key " data-key='up'>▲</div>
        <div class="key none"></div>
    
        <!-- 第五行-->
        <div class="key xl" data-key='ctrl'>ctrl</div>
        <div class="key" data-key='win'>win</div>
        <div class="key" data-key='alt'>alt</div>
        <div class="key vl" data-key=' '></div>
        <div class="key" data-key='alt'>alt</div>
        <div class="key" data-key='win'>win</div>
        <div class="key" data-key='fn'>fn</div>
        <div class="key xl" data-key='ctrl'>ctrl</div>
        <div class="key" data-key='left'>◀</div>
        <div class="key" data-key='down'>▼</div>
        <div class="key" data-key='right'>▶</div>
    </div>

    <script src="js/index.js"></script>
</body>
</html>